<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书管理系统</title>
  <script src="js/jquery-3.6.0.min.js"></script>
  <script src="js/bootstrap.bundle.min.js"></script>
  <script src="js/jquery.cookie.min.js"></script>
  <script src="js/nav.js"></script>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- 引入图标 -->
  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">   
  <link rel="stylesheet" href="css/nav.css">
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    /* .window table{

    width:100%;
    border:1;
} */
.booktable{
    width:100%;
    border:1px inset black;

    /* background-color: rgb(44, 233, 27); */
}

.booktable tr{
    text-align: center;
    vertical-align:middle;
    border:1px inset black;
}

.booktable th{
  height: 60px;
    border:1px inset black;
}
.note{
  font-size: 18px;
}
</style>
</head>
<body>
    <!-- 页面导航 -->
    <nav>
      <ul class="nav justify-content-center nav-pills">
        <li class="nav-item">
          <a class="nav-link " href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="search.html">查询</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="borrow.html">借书</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="return.html">归还</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="person.html">个人信息</a>
        </li>
      </ul>
    </nav>

    <div class="container">
      <br><br><br>
      <table class="booktable" cellpadding="20" cellspacing="1">
        <thead>
          <tr>
            <th colspan="5" style="font-weight: bolder;font-size: 24px;"> 我的借书</th>
          </tr>
          <tr style="font-weight: bolder;font-size: 20px;">
              <th>书籍名</th>
              <th>作者</th>
              <th>数量</th>
              <!-- <th>借阅时间（天）</th> -->
              <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <!-- <tr  style="font-family: '新宋体','宋体';font-size: 18px;"> 
            <th>人类简史</th>
            <th>尤万尔·赫拉利</th>
            <th>1</th>
            <th>23</th>
            <th>
              <button type="button" class="btn btn-light">续借</button>
              <button type="button" class="btn btn-secondary">归还</button>
            </th>
          </tr> 
          <tr  style="font-family: '新宋体','宋体';font-size: 18px;"> 
            <th>平凡的世界</th>
            <th>路遥</th>
            <th>1</th>
            <th>23</th>
            <th>
              <button type="button" class="btn btn-light">续借</button>
              <button type="button" class="btn btn-secondary">归还</button>
            </th>
          </tr> 
          <tr  style="font-family: '新宋体','宋体';font-size: 18px;"> 
            <th>上帝掷骰子吗？量子物理史话</th>
            <th>曹天元</th>
            <th>1</th>
            <th>23</th>
            <th>
              <button type="button" class="btn btn-light">续借</button>
              <button type="button" class="btn btn-secondary">归还</button>
            </th>
          </tr> 
          <tr  style="font-family: '新宋体','宋体';font-size: 18px;"> 
            <th>果壳中的宇宙</th>
            <th>史蒂芬·威廉·霍金</th>
            <th>1</th>
            <th>36 <span>（已超时）</span></th>
            <th>
              <button type="button" class="btn btn-light">续借</button>
              <button type="button" class="btn btn-secondary" >归还</button>
            </th>
          </tr>  -->
        </tbody>
        <tfoot>
          <tr>
            <th colspan="5">
              <button type="button" class="btn btn btn-primary return-all-btn" >一键归还</button>
            </th>
          </tr>
          <tr>
            <th colspan="5" style="font-size: 18px; font-weight: normal;text-align:left;padding: 0 20px;" >
                <p class="note">您有<span>1</span>本书已超时，产生了<span>0.00</span>元的违约金</p>
                <p class="note">您可前往图书管理处缴纳违约金后消除借书记录</p>
              
            </th>
          </tr>
        </tfoot>
    </table>
    <br><br><br>
    <div>
      
    </div>

  </div>
  <script>
    //在登录时已经将用户的账户信息存储到cookie中，在相同根目录的任何位置都可以访问到
    var account= $.cookie('id')
    var returnBooks= []
    // 在页面渲染完成时就发送ajax请求，以获得书籍借阅信息
    $(document).ready(function(){
      // console.log(456465);
      
      $.post(
        "http://localhost:8080/QueryRdBookController",
        {
          rdId:account
        },
        function(data,status){
          if(status==='success'){
            data=JSON.parse(data)
            returnBooks=data.data
            updataReturnView(returnBooks)
          }
        }
      )
      

    })

    function updataReturnView(books){
      $('tbody').empty()
      
      for(var i=0;i<books.length;i++){
        var html=`          
          <tr  style="font-family: '新宋体','宋体';font-size: 18px;"> 
            <th>${books[i].bkName}</th>
            <th>${books[i].bkAuthor}</th>
            <th>1</th>

            <th>
              <button type="button" class="btn btn-secondary return-btn" >归还</button>
            </th>
          </tr> `
        $('tbody').append(html)
      }
    }
    $('tbody').on("click",'.return-btn',function(e){

      var index=$(e.target.parentNode.parentNode).index()
      returnBooks.splice(index,1)
      updataReturnView(returnBooks)
    })
    $('.return-all-btn').click(function(){
      var bookids=[]
      for(var i=0;i<returnBooks.length;i++){
        bookids.push(returnBooks[i].bkId)
      }
      var mybkIds=JSON.stringify(bookids) 
      $.post(
        'http://localhost:8080/ReturnBookController',
        {
          rdId:account,
          bkIds:mybkIds
        },
        function(data,status){
          if(status==='success'){
            console.log(data);
            data=JSON.parse(data)
            if(data.status===3){
              returnBooks=[]
              updataReturnView(returnBooks)
              alert('还书成功')
            }else{
              alert(data.msg)
            }
          }else{
            alert("还书失败")
          }
        }
      )
    })
  </script>
</body>
</html>